-webkit-mask-composite

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die -webkit-mask-composite Eigenschaft legt fest, wie mehrere auf dasselbe Element angewendete Maskenbilder miteinander kombiniert werden. Maskenbilder werden in der umgekehrten Reihenfolge zusammengesetzt, in der sie mit der -webkit-mask-image Eigenschaft deklariert wurden.

Hinweis: Es gibt eine standardisierte mask-composite Eigenschaft, die Teile dieser nicht standardisierten Eigenschaft mit unterschiedlichen Schlüsselwörtern abdeckt.

Syntax

css

/* Keyword values */
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

/* Global values */
-webkit-mask-composite: inherit;
-webkit-mask-composite: initial;
-webkit-mask-composite: revert;
-webkit-mask-composite: revert-layer;
-webkit-mask-composite: unset;

Werte

clear: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden gelöscht.
copy: Das Quell-Maskenbild ersetzt das Ziel-Maskenbild.
source-over: Das Quell-Maskenbild wird über das Ziel-Maskenbild gerendert.
source-in: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden durch die Pixel des Quell-Maskenbildes ersetzt; alle anderen Pixel werden gelöscht.
source-out: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden gelöscht; alle verbleibenden Pixel des Quell-Maskenbildes werden gerendert.
source-atop: Die Pixel des Ziel-Maskenbildes werden gerendert. Die Pixel des Quell-Maskenbildes werden nur gerendert, wenn sie einen nicht transparenten Teil des Ziel-Maskenbildes überlappen. Dies bewirkt, dass das Quell-Maskenbild keinen Effekt hat.
destination-over: Das Ziel-Maskenbild wird über das Quell-Maskenbild gerendert.
destination-in: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild bleiben die Pixel des Ziel-Maskenbildes; alle anderen Pixel werden gelöscht.
destination-out: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden gelöscht; alle verbleibenden Pixel des Quell-Maskenbildes werden gerendert.
destination-atop: Die Pixel des Quell-Maskenbildes werden gerendert. Die Pixel des Ziel-Maskenbildes werden nur gerendert, wenn sie einen nicht transparenten Teil des Ziel-Maskenbildes überlappen. Dies bewirkt, dass das Ziel-Maskenbild keinen Effekt hat.
xor: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden vollständig transparent, wenn sie beide vollständig undurchsichtig sind.

Formaldefinition

Anfangswert	`source-over`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

-webkit-mask-composite = 
  <composite-style>#

Beispiele

Zusammensetzen mit XOR

css

.example {
  -webkit-mask-image: url(mask1.png), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}

mask-composite